
<template>
	<div class="PlanDetails" style="overflow: auto;height:100vh">
		<!-- <header><img @click="goBack" src="http://hstatic.1818pay.cn/image/icon/left.png" /><span>方案详情</span></header> -->
		<div class=" details" style="height:100%;background:#f2f2f2;padding-top: 23px;">
			<div class="plandiv">
				<div style='display: flex;justify-content: space-between; width: 100%;background:#4F8BF4;'>
					<div v-if="planDetail" style=" color: #fff;width:90%;margin:5px auto;" >
						<div style="display: inline-block;width:46.5%">
							<img style="    width: 20px;" class="BankLogo" :src='planDetail.plan.bankCode | fmtBankimsrc' />
							<div class="BankTitle mag-t-5">
								<p style='font-size: 14px;'>{{planDetail.plan.bankCode| fmtBankCode}}({{planDetail.plan.cardNo | fmtCardNo }})</p>
							</div>
						</div>
						<div style="display: inline-block;width:7%">
							<img style="width: 20px;height:20px;position: relative; top: 4px;" src="http://hstatic.1818pay.cn/image/icon/dae/yulan_dao@3x.png" alt="">
						</div>
						<div style="display: inline-block;width:46.5%;text-align: right;">
							<!-- <img style="    width: 20px;" class="BankLogo" :src='scdata.bankCode | fmtBankimsrc' /> -->
							<div class="BankTitle">
								<p>
									<span class="mag-r-10" style="margin-top: 0.1rem;display: inline-block;vertical-align: middle;"><van-icon name="location-o" /></span>
									<span style="vertical-align: middle;">{{city}}</span>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div style="clear: both;"></div>

				<div v-if="planDetail" class="center mag-t-30">
						<div class="f-22 c999">总到账金额</div>
						<div class="f-42 blue">{{planDetail.plan.totalRepaymentPrice| FixedNum2}}</div>
				</div>
				<div class="time-line">
                    <div class="line-hui"></div>
                </div>
				<div v-if="planDetail" class="BankSurplus">
					<div class="fiex pad-b-10">
						<div class="fiex1">
							<p class="TotalTex1 f-22 c999">预留金额(元)</p>
							<p class="TotalTex2 f-30">{{planDetail.plan.reservePrice | FixedNum2}}</p>
						</div>
						<div class="border-h"></div>
						<div class="fiex1">
							<p class="TotalTex1 f-22 c999">手续费(元)</p>
							<p class="TotalTex2 f-30">{{planDetail.plan.totalFee| FixedNum2}}</p>
						</div>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>
			<div style="margin: 0 auto;width:100%;background: #fff;margin-top:0.3rem; padding-bottom: 2rem;">
				<div class="kk">
					<ul class="bill" v-if="planDetail.planDetails">
						<li :key="key" v-for="(item,key) in planDetail.planDetails" class="pad-t-20 pad-b-20">
							<div v-if="item.payType==2" style="    display: flex;align-items: center;">
								<p style="display: inline-block;" class="mag-r-10"><img style="    width: 0.6rem;" src="http://hstatic.1818pay.cn/image/icon/dae/xiaofei@3x.png" alt=""></p>
								<div style="flex: 1; margin-left: 6px;  font-size: .2rem;">
									<div class="tex1">消费 {{item.price|moneyData}}元 <span style='color:#949494;'> (手续费{{item.fee|moneyData}}元)</span>
										<!-- <span style="float: right;">{{item.bankCode | fmtBankCode}}【{{item.cardNo|fmtCardNo}}】</span> -->
										<div style="clear: both;"></div>
									</div>
									<p class="tex2">{{item.executeTime | fmtDate}}</p>
									<p v-if="item.state==6&&item.payState==4" style="color:black">失败原因:<span style="color:red">{{item.cause}}</span></p>
								</div>
							</div>
							<div v-if="item.payType==1" style="    display: flex;align-items: center;">
								<p class="mag-r-10"><img style=" width: 0.6rem;" src="http://hstatic.1818pay.cn/image/icon/dae/ruzhang@3x.png" alt=""></p>
								<div style="flex: 1;    margin-left: 6px;    font-size: .2rem;">
									<div class="tex1">到账 {{item.price|moneyData}}元 <span style='color:#949494;'> (手续费{{item.fee|moneyData}}元)</span>
										<!-- <span style="float: right;">{{item.bankCode | fmtBankCode}}【{{item.cardNo|fmtCardNo}}】</span> -->
										<div style="clear: both;"></div>
									</div>
									<p class="tex2">{{item.executeTime | fmtDate}}</p>
									<p v-if="item.state==6&&item.payState==4" style="color:black">失败原因:<span style="color:red">{{item.cause}}</span></p>
								</div>
							</div>
						</li>
					</ul>
					
				</div>
			</div>
			<div style="clear: both;"></div>
			<div class="inp">
				<button class="res" @click="init()" style="float: left;margin-left: 5%;background: #E8EEF6;color:#2A71C8;">重置</button>
				<button class="res" @click="showalert" style="float: right;margin-right: 5%;background: #438DF3;color:white;">提交</button>
				<!-- :before-close="beforeClose" -->
				
				<van-dialog
					v-model="show"
					show-cancel-button
					:message="li+(basicAmount)+lia"
					@confirm="snb">
				</van-dialog>
			</div>
		</div>

		<div style="clear: both;"></div>
	</div>
</template>

<script>
 var $th ="";
	import AreaList from './are';
	export default {
		data() {
			return {
				items: [],
				show:false,
				scdata:{}, //储蓄卡
				city:'', //位置
				plan:{},  //
				repNum:'',//到账次数
				li:'执行此计划信用卡需预留', 
				lia:',请确保此卡金额充足，以免交易失败',
				basicAmount:null,
				createPlan:"",//用户创建计划的信息
				planDetail:"",//计划详情
				htmlContent:"" //返回的页面内容
			};
		},
		created: function () {
			console.log(this.$store.state.plancccard)
			console.log("this.$store.state",)
			window.document.title = this.$store.state.ylPlanTitle;
		},
		mounted(){
			$th = this;
			// 获取预览计划
			$th.createPlan =JSON.parse(localStorage.getItem("createPlan"));
			//预览计划
			$th.init();
			console.log("$th.createPlan",$th.createPlan);
		},
		filters: {
			moneyData:function(val){
				if(val){
					 var responese = $th.$accMul(val,0.01).toFixed(2);
					return responese;
				}
				
			},
			fmtDate: function (time) {
				time = new Date(time)
				var year=time.getFullYear(time)
				var month = time.getMonth(time) + 1 < 10 ? "0" + (time.getMonth() + 1) : time.getMonth() + 1, //月份是从0开始的
					day = time.getDate(time) < 10 ? "0" + time.getDate() : time.getDate(),
					hour = time.getHours(time) < 10 ? "0" + time.getHours() : time.getHours(),
					min = time.getMinutes(time) < 10 ? "0" + time.getMinutes() : time.getMinutes()

				time = year+'-'+month + '-' + day +' ' + hour + ':' + min
				return time;
			},
			fmtDate2:function(time){
				// console.log(time)
				var list = time.split(',')
				console.log(list)
				var create = null
				var end = null
				for(var i=0;i<list.length;i++){
					// console.log(111)
					var listitem= new Date(parseInt(list[i]))
					var year=listitem.getFullYear(listitem)
					var month = listitem.getMonth(listitem) + 1 < 10 ? "0" + (listitem.getMonth() + 1) : listitem.getMonth() + 1, //月份是从0开始的
					day = listitem.getDate(listitem) < 10 ? "0" + listitem.getDate() : listitem.getDate(),
					hour = listitem.getHours(listitem) < 10 ? "0" + listitem.getHours() : listitem.getHours(),
					min = listitem.getMinutes(listitem) < 10 ? "0" + listitem.getMinutes() : listitem.getMinutes();
					// console.log(year + '/' + month + '/' + day  )
					if(i==0){
						create = year + '/' + month + '/' + day 
					}
					if(i==list.length-1){
						end	= year + '/' + month + '/' + day 
					}
					
				}
				return create + '~' + end;
			},
		},
		methods: {
			async init(){
				  try {
                    var cardDetial = await $th.$axiosFun('/plan/plan/createPlan',$th.createPlan,'post');
                    if(cardDetial.code==1000){
						$th.planDetail = cardDetial.data;
						$th.planDetail.plan.totalRepaymentPrice = $th.$accMul($th.planDetail.plan.totalRepaymentPrice,0.01)
						$th.planDetail.plan.reservePrice = $th.$accMul($th.planDetail.plan.reservePrice,0.01)
						$th.planDetail.plan.totalFee = $th.$accMul($th.planDetail.plan.totalFee,0.01)
						//获取城市
						$th.city = $th.planDetail.planDetails[0].ldCityNme;
						console.log("计划详情",$th.planDetail);
                        //预览成功
                 }else{
                        // $th.$toast(cardDetial.message);
                    }
					console.log("接口返回的结果",cardDetial)

                } catch (error) {
                    console.log("error",error)
                }
			},
			goBack() {
				this.$router.push({
					name: 'zdjh',
					params: {
						cccard: this.cccard,
						city: this.$store.state.merchant_city,
						province: this.$route.params.province,
						amount: this.$route.params.amount
					}
				})
			},
			sub() {
				var city = this.$route.params.city;
				// var province = this.$route.params.province;
				this.$Spin.show();
				axios.get(this.$store.state.host + '/plans/createPlan', {
					params: {
						programNameWeb:"kyq",
						merchantId: this.$store.state.merchantId,
						institutionId: this.$store.state.institutionId,
						appId: this.$store.state.appId,
						cardId: this.$store.state.cccard.cardId,
						amount: this.$store.state.amout * 100,
						province: this.$store.state.province,
						city: this.$store.state.city,
						cardNumber:this.scdata.cardNo,  //到账储蓄卡
						bankCode:this.scdata.bankCode,
						repayment:this.$store.state.repNum,
					}
				}).then(res => {
					this.$Spin.hide();
					if (res.data.respCode == '0000') {
						this.$store.state.plancccard = res.data.data;
						this.items= res.data.data.list
						this.plan=res.data.data.plan
					} else {
						this.$Message.error(res.data.respDesc);
					}
				}).catch(err=>{
					this.$Spin.hide();
					this.$Message.error('请求超时');
				})
			},
		async showalert(){ //数据提交
			try {
				var sendData = "";
				//提取通道
				var aisleListStr = "";
				$.each($th.planDetail.aisleList,function(k,v){
					aisleListStr+= v+',';
				})

				sendData={
					programNameWeb:"kyq",
					customerId:$th.planDetail.plan.customerId,// 用户id	
					aisles:aisleListStr,// 可用通道，逗号分隔
					flag:"0",// 默认为0
				}
				 var reqData =await $th.$axiosFun('/plan/plan/commitPlan',sendData,'post');
				 if(reqData.code==1000){
					   $th.$toast("制定成功");
					   setTimeout(function(){
						   $th.$router.push('/dzx');
					   },500)
					 	

				 } else if(reqData.code==9001){
					 localStorage.setItem("commitPlan",JSON.stringify(reqData.data));
					  $th.$dialog.alert({
						title: '提示',
						message: '请开通用户协议'
						}).then(() => {
							localStorage.setItem("cardId",$th.planDetail.plan.cardId);
							$th.$router.push('/ktxyzf?cardId='+$th.planDetail.plan.cardId);
						});

				 } else if(reqData.code==9002){
					if(reqData.data.signModel==1){
						localStorage.setItem("commitPlan",JSON.stringify(reqData.data));
						$th.$dialog.alert({
						title: '提示',
						message: '请开通用户协议'
						}).then(() => {
							localStorage.setItem("cardId",$th.planDetail.plan.cardId);
							$th.$router.push('/ktxyzf2?cardId='+$th.planDetail.plan.cardId);
						});
					}else if(reqData.data.signModel==2){
						//跳转第三方页面以后屏蔽手机返回键
						 try {
							if(navigator.userAgent.indexOf("Android") >-1){
								android.nativeMonitorButton("0","0");
							}else{
								window.webkit.messageHandlers.nativeMonitorButton.postMessage({
								back:"0",
								colse: "0"
								});
					 		 }
							} catch (error) {

							}
						localStorage.setItem("commitPlan",JSON.stringify(reqData.data));
						localStorage.setItem("cardId",$th.planDetail.plan.cardId);
						localStorage.setItem('callbackHTML',reqData.data.transInfo)
						localStorage.setItem("signorderNo",reqData.data.orderNo)
						window.location.href = "sige.html";
					}
					else if(reqData.data.signModel==3){
							//跳转第三方页面以后屏蔽手机返回键
						 try {
							if(navigator.userAgent.indexOf("Android") >-1){
								android.nativeMonitorButton("0","0");
							}else{
								window.webkit.messageHandlers.nativeMonitorButton.postMessage({
								back:"0",
								colse: "0"
								});
					 		 }
					
							} catch (error) {

							}
						localStorage.setItem("commitPlan",JSON.stringify(reqData.data));
						localStorage.setItem("cardId",$th.planDetail.plan.cardId);
						localStorage.setItem("signorderNo",reqData.data.orderNo);
						window.location.href = reqData.data.transInfo;
					}
				 }
				 else{
					$th.$toast(reqData.message);
				 }

			} catch (error) {
				
			}
			 
				// this.show = true;
			},
		
			snb() {
				// this.$Spin.show();
				axios.get(this.$store.state.host + '/plans/savePlan', {
					params: {
						channelCode:this.$store.state.channelCode,
						planJsonKey: this.$store.state.plancccard.planJsonKey,
						token: this.$store.state.token,
						// mccs: this.mccArr.join(","),
						// orderNos: this.mccOrderNo.join(",")
					}
				}).then(res => {
					if (res.data.respCode == '0000') {
						// this.$Spin.hide();
						this.$router.push('suok')
					} else {
						this.$Message.error(res.data.respDesc);
					}
				})
			}

		}

	}
</script>
<style scoped="scoped">
.border-h{border-right:2px solid #F7F7F7FF; height: 0.6rem; }
.time-line{padding: 0.2rem 0; position: relative}
.time-line::after{content: ''; display: block; width: 0.2rem; height: 0.2rem; background: #f7f7f7; border-radius: 100%; position: absolute; left: -0.1rem; top: 0; bottom: 0; margin: auto;}
.time-line::before{content: ''; display: block; width: 0.2rem; height: 0.2rem; background: #f7f7f7; border-radius: 100%; position: absolute; right: -0.1rem; top: 0; bottom: 0; margin: auto;}
	html {
		background-color: #f1f1f1;
	}

	body {
		background-color: #f1f1f1;
	}

	.PlanDetails header {
		font-size: 18px;
		background-color: #2A71C8;
		color: white;
		text-align: center;
		color: #FFFFFF;
		padding: 3% 0;
	}

	.PlanDetails header img {
		float: left;
		width: 5%;
		margin: 1% 0 0 2%;
	}

	.planwrap {
		background-color: #2A71C8;
		height: 110px;
	}

	.PlanDetails .details .plandiv {
		width: 90%;
		background: rgba(255, 255, 255, 1);
		border-radius: 4px;

		margin: auto;
		text-align: left;
		font-size: 16px;
		z-index: 999;
		overflow: hidden;
	}

	.PlanDetails .BankLogo {
		background: #fff;
		border-radius: 50%;
		position: relative;
		top: 4px;
	}

	.PlanDetails .BankTitle {
		/* float: left;
		margin: 1.8% 2%;
		font-size: 16px; */
		margin-left: 6px;
		display: inline-block;font-size: .3rem;
	}

	.PlanDetails .BankState {
		float: right;
		margin-right: 2%;
		margin-top: 3px;
		line-height: 32px;
		width: 30%;
	}

	.PlanDetails .icolo {
		display: inline-block;
		width: 10px;
		height: 10px;

		margin-right: 5%;
		margin-top: 5%;
		border-radius: 50%;
	}

	.PlanDetails .BankSurplus {
		width: 100%;
		text-align: center;
	}

	.PlanDetails .BankSurplusP {
		font-size: 14px;
		/* margin-top: 10px; */
		font-family: PingFang-SC-Regular;
		color: rgba(177, 190, 214, 1);
	}

	.PlanDetails .BankSurplusP1 {
		font-size: 28px;
		/* padding: 5px 0 10px 0; */
		font-family: PingFang-SC-Bold;
		color: rgba(74, 122, 211, 1);
	}

	.PlanDetails .BankSurplusP2 {
		color: rgba(177, 190, 214, 1);
		font-size: 16px;
	}

	.PlanDetails .BankSurplus hr {
		height: 1px;
		background: rgba(230, 234, 243, 1);
		border: none;
	}

	.Total {
		float: left;
		width: 33.3%;
		font-size: 16px;
		border-right: 1px solid #E6EAF3;
		margin: 5% 0;
	}

	.TotalTex1 {
		font-size: 14px;
		color: #C1C1C1;
	}

	.TotalTex2 {
		font-size: 19px;
		color: #303030;
	}

	.procedures {
		float: right;
		width: 33.3%;
		margin-top: 5%;
		font-size: 16px;
	}

	.procedures img {
		position: relative;
		top: 4%;
	}

	.procedures1 {
		color: #6D89BD;
		font-size: 16px;
	}

	.procedures2 {
		color: #4A7AD3;
		font-size: 16px;
	}

	.bianhao {
		text-align: left;
		background: rgba(177, 193, 224, 1);
		border-radius: 0rem 0 1rem 1rem;
		font-size: 16px;
		font-family: PingFang-SC-Regular;
		color: rgba(255, 255, 255, 1);
	}

	.bianhao p {
		margin-left: 5%;
	}

	.kk {
		/* background: #fff; */
		border-radius: 10px;
		margin: 0 auto;
		width: 90%;
	}

	.kk .unbhr {
		text-align: center;
		display: inline-block;
		margin: auto;
		position: relative;
		bottom: -10%;
		background-color: #fcfcfc;
		font-family: PingFang-SC-Regular;
		color: rgba(168, 168, 168, 1);
	}

	.bill {
		padding-bottom: 5%;
		list-style-type: none;
		text-align: center;
		font-size: 14px;
		margin: auto;
	}

	.bill li {
		text-align: left;
		border-bottom: 1px solid #F2F2F2;
		/* padding: 0 10px; */
		line-height: 18px;
	}

	.bill .tex1 {
		/* padding-top: 3%; */
		color: black;
	}

	

	.bill .tex2 {
		font-family: PingFangSC-Regular;
		color: rgba(140, 140, 140, 1);
	}

	.bill .tex2 span {
		float: right;
		font-family: PingFangSC-Regular;
		color: rgba(140, 140, 140, 1);
	}
	
	.inp {
		background: #fff;
    	height: 70px;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-top:10px; 
	}

	.BankState {
		float: right;
		margin-right: 5%;
		font-size: 16px;
	}
	.res {
		width: 40%;
		border: none;
		padding: 10px 20px;
		font-size: 0.3rem;
		border-radius: 3px;
	}


	
</style>
